import React, {useState, useMemo, useEffect, memo, useCallback} from 'react'
import classnames from 'classnames'
import PropTypes from 'prop-types'
import './CitySelector.css'

const CityItem = memo(function CityItem (props) {
  const {name, onSelect} = props
  return (
    <li className="city-li" onClick={() => onSelect(name)}>{name}</li>
  )
})

CityItem.prototype = {
  name: PropTypes.string.isRequired,
  onSelect: PropTypes.func.isRequired
}

const CitySection = memo(function CitySection (props) {
  const {title, cities = [], onSelect} = props
  return (
    <ul className="city-ul">
      <li className="city-li" key="title" data-cate={title}>{title}</li>
      {
        cities.map(item => {
          return (
            <CityItem name={item.name} key={item.name} onSelect={onSelect} ></CityItem>
          )
        })
      }
    </ul>
  )
})

CitySection.prototype = {
  title: PropTypes.string.isRequired,
  cities: PropTypes.array,
  onSelect: PropTypes.func.isRequired
}

const AlphaIndex = memo(function AlphaIndex (props) {
  const {
    alpha, onClick
  } = props
  return (
    <i className="city-index-item" onClick={() => onClick(alpha)}>{alpha}</i>
  )
})

AlphaIndex.prototype = {
  alpha: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired
}

const alphabet = Array.from(new Array(26), (ele, index) => {
  return String.fromCharCode(65 + index)
})


const  CityList = memo(function CityList (props) {
  const {setions, onSelect, toAlpha} = props
  return (
    <div className="city-list">
      <div className="city-cate">
        {
          setions.map(item => {
            return (
              <CitySection title={item.title} cities={item.citys} onSelect={onSelect} key={item.title}></CitySection>
            )
          })
        }
      </div>
      <div className="city-index">
        {
          alphabet.map(alpha => {
            return (
              <AlphaIndex alpha={alpha} key={alpha} onClick={toAlpha} />
            )
          })
        }
      </div>
    </div>
  )
})

CityList.prototype = {
  setions: PropTypes.array.isRequired,
  onSelect: PropTypes.func.isRequired
}

const SuggestItem = memo(function SuggestItem (props) {
  const {name, onClick} = props
  return (
    <li className="city-suggest-li" onClick={() => onClick(name)}>{name}</li>
  )
})

SuggestItem.prototype = {
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired
}

const Suggest = memo(function Suggest (props) {
  const {searchKey, onSelect} = props
  const [result, setResult] = useState([])
  useEffect(() => {
    fetch('http://localhost:8089/rest/search?key=' + encodeURIComponent(searchKey))
    .then(res => res.json())
    .then(data => {
      const {result, searchKey: sk} = data
      if(sk === searchKey) {
        setResult(result)
      }
    })
  }, [searchKey])

  const fallBaackResult = useMemo(() => {
    if(!result.length) {
      return [{display: searchKey}]
    }
    return result
  }, [result, searchKey])

  return (
    <div className="city-suggest">
      <ul className="city-suggest-ul">
        {
          fallBaackResult.map(item => {
            return <SuggestItem key={item.display} name={item.display} onClick={onSelect} />
          })
        }
      </ul>
    </div>
  )
})

Suggest.prototype = {
  searchKey: PropTypes.string.isRequired,
  onSelect: PropTypes.func.isRequired
}

const CitySelector = memo(function CitySelector (props) {
  const {show, cityData, isLoading, onBack, fetchCityData, onSelect} = props

  const [searchKey, setSearchKey] = useState('')
  const key = useMemo(() => searchKey.trim(), [searchKey])

  useEffect(() => {
    if(!show || cityData || isLoading) {
      return
    }
    console.log(1111);
    fetchCityData()
  }, [show, cityData, isLoading])

  const toAlpha = useCallback(alpha => {
    document.querySelector(`[data-cate='${alpha}']`).scrollIntoView()
  }, [])

  const outputCitySetions = () => {
    console.log('isLoading =', isLoading);
    if(isLoading) {
      return <div>loading</div>
    }
    console.log('cityData =', cityData);
    if(cityData) {
      return <CityList setions={cityData.cityList} onSelect={onSelect} toAlpha={toAlpha} />
    }
    return <div>error</div>
  }

  return (
    <div className={["city-selector", (!show) && 'hidden'].filter(Boolean).join(' ')}>
      <div className="city-search">
        <div className="search-back" onClick = {() => onBack()}>
          <svg width="42" height="42">
            <polyline points="25,13 16,21 25,29" stroke="#fff" strokeWidth="2" fill="none" />
          </svg>
        </div>
        <div className="search-input-wrapper">
          <input type="text" value={searchKey} className="search-input" placeholder="城市、车站的中文或拼音" onChange={e => setSearchKey(e.target.value)}/>
        </div>
        <i className={classnames("search-clean", {
          hidden: key.length === 0
        })} onClick={() => setSearchKey('')}>&#xf063;</i>
      </div>
      {
        Boolean(key) && (<Suggest searchKey={key} onSelect={key => onSelect(key)} />)
      }
      {
        outputCitySetions()
      }
    </div>
  )
})

CitySelector.prototype = {
  show: PropTypes.bool.isRequired,
  cityData: PropTypes.object,
  isLoading: PropTypes.bool.isRequired,
  onBack: PropTypes.func.isRequired,
  fetchCityData: PropTypes.func.isRequired,
  onSelect: PropTypes.func.isRequired
}

export default CitySelector